//
//  MeView.swift
//  WechatApp
//
//  Created on 2024.
//

import SwiftUI
import UIKit

struct MeView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 0) {
                    // Header
                    HStack(spacing: 20) {
                        if let avatarImage = UIImage(named: "img_1") {
                            Image(uiImage: avatarImage)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 64, height: 64)
                                .clipShape(RoundedRectangle(cornerRadius: 8))
                        } else {
                            RoundedRectangle(cornerRadius: 8)
                                .fill(Color.gray.opacity(0.3))
                                .frame(width: 64, height: 64)
                        }
                        
                        VStack(alignment: .leading, spacing: 12) {
                            Text("Sean")
                                .font(.system(size: 22, weight: .bold))
                            
                            HStack {
                                Text("WeChat ID: wxid_sean")
                                    .font(.system(size: 14))
                                    .foregroundColor(.secondary)
                                
                                Spacer()
                                
                                Image(systemName: "qrcode")
                                    .foregroundColor(.secondary)
                                
                                Image(systemName: "chevron.right")
                                    .font(.system(size: 12))
                                    .foregroundColor(.secondary)
                            }
                        }
                    }
                    .padding(24)
                    .background(Color.white)
                    
                    Spacer()
                        .frame(height: 8)
                    
                    // Services
                    MeRow(icon: "creditcard.fill", title: "Services", color: .green)
                    
                    Spacer()
                        .frame(height: 8)
                    
                    // Favorites & Sticker Gallery
                    MeRow(icon: "heart", title: "Favorites", color: .red)
                    Divider()
                        .padding(.leading, 56)
                    MeRow(icon: "face.smiling", title: "Sticker Gallery", color: .orange)
                    
                    Spacer()
                        .frame(height: 8)
                    
                    // Settings
                    MeRow(icon: "gearshape.fill", title: "Settings", color: .blue)
                }
            }
            .background(Color(red: 0.93, green: 0.93, blue: 0.93))
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Color.clear
                }
            }
        }
    }
}

struct MeRow: View {
    let icon: String
    let title: String
    let color: Color
    
    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: icon)
                .foregroundColor(color)
                .frame(width: 24)
            
            Text(title)
                .font(.system(size: 16))
            
            Spacer()
            
            Image(systemName: "chevron.right")
                .font(.system(size: 12))
                .foregroundColor(.secondary)
        }
        .padding(.vertical, 12)
        .padding(.horizontal, 16)
        .background(Color.white)
    }
}

#Preview {
    MeView()
}

